<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div
    fxLayout="column"
    fxFlex="100"
    [ngStyle]="{
        background: dataExplorerWidget.baseAppearanceConfig.backgroundColor,
        color: dataExplorerWidget.baseAppearanceConfig.textColor,
        overflowX: 'auto'
    }"
>
    <sp-no-data-in-date-range
        *ngIf="showNoDataInDateRange"
        [viewDateRange]="timeSettings"
        class="h-100"
    >
    </sp-no-data-in-date-range>

    <sp-too-much-data
        [amountOfEvents]="amountOfTooMuchEvents"
        (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
        *ngIf="showTooMuchData"
        class="h-100"
    >
    </sp-too-much-data>

    <div class="table-container">
        <table
            data-cy="data-explorer-table"
            mat-table
            *ngIf="showData"
            [dataSource]="dataSource"
            matSort
            (matSortChange)="sortData($event)"
            class="table-widget"
        >
            <ng-container [matColumnDef]="'time'">
                <div>
                    <th
                        mat-header-cell
                        mat-sort-header
                        *matHeaderCellDef
                        [ngStyle]="{
                            background:
                                dataExplorerWidget.baseAppearanceConfig
                                    .backgroundColor,
                            color: dataExplorerWidget.baseAppearanceConfig
                                .textColor
                        }"
                    >
                        <label class="column-header">Timestamp</label>
                    </th>
                    <td
                        mat-cell
                        data-cy="data-explorer-table-row-timestamp"
                        *matCellDef="let row"
                        style="text-align: left"
                    >
                        {{ row['time'] | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}
                    </td>
                </div>
            </ng-container>

            <ng-container
                *ngFor="
                    let element of dataExplorerWidget.visualizationConfig
                        .selectedColumns
                "
                [matColumnDef]="element.fullDbName"
            >
                <div *ngIf="!(element.fullDbName === 'time')">
                    <th
                        mat-header-cell
                        mat-sort-header
                        *matHeaderCellDef
                        [ngStyle]="{
                            background:
                                dataExplorerWidget.baseAppearanceConfig
                                    .backgroundColor,
                            color: dataExplorerWidget.baseAppearanceConfig
                                .textColor
                        }"
                    >
                        <label class="column-header">{{
                            element.fullDbName
                        }}</label>
                    </th>
                    <td
                        mat-cell
                        *matCellDef="let row"
                        [attr.data-cy]="
                            'data-explorer-table-row-' + element.fullDbName
                        "
                        style="text-align: left"
                    >
                        {{ row[element.fullDbName] }}
                    </td>
                </div>
            </ng-container>
            <ng-container
                *ngFor="let element of groupByColumnNames"
                [matColumnDef]="element"
            >
                <th
                    mat-header-cell
                    mat-sort-header
                    *matHeaderCellDef
                    [ngStyle]="{
                        background:
                            dataExplorerWidget.baseAppearanceConfig
                                .backgroundColor,
                        color: dataExplorerWidget.baseAppearanceConfig.textColor
                    }"
                >
                    <label class="column-header">{{ element }}</label>
                </th>
                <td
                    mat-cell
                    *matCellDef="let row"
                    [attr.data-cy]="'data-explorer-table-row-' + element"
                    style="text-align: left"
                >
                    {{ row[element] }}
                </td>
            </ng-container>

            <tr
                mat-header-row
                *matHeaderRowDef="columnNames; sticky: true"
            ></tr>
            <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
        </table>
        <mat-paginator
            color="accent"
            [length]="100"
            [pageSize]="500"
            [pageSizeOptions]="[10, 20, 50, 100, 500, 1000]"
            aria-label="Select page"
        >
        </mat-paginator>
    </div>
</div>
